<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../src/frame/bootstrap-3.0.0/css/metro-bootstrap.min.css">
    <link rel="stylesheet" href="../src/css/minion-global.css">
    <style type="text/css">
    img {
        width: 100%;
    }
    
    body {
        background-color: #EEEEEE;
    }
    
    .row div {
        padding: 3px;
    }
    .loading {
        text-align: center;
        margin: 20px 0px;
    }
    </style>

</head>

<body class="minion">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">豆饼表情</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">逗比</a></li>
                    <li><a href="#">萌萌哒</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-img container-fluid">
        <div class="row">
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/1.jpg" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/2.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/3.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/4.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/5.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/6.jpg" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/7.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/5.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/8.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/9.png" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/2.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/9.png" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/4.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/8.gif" />
            </div>
        </div>
    </div>
    <div class="loading">
        <span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> 上滑继续加载
    </div>

    <script src="../src/frame/jquery-1.9.1.js"></script>
    <script src="../src/frame/angular-1.3.0.14/angular.min.js"></script>
    <script src="../src/frame/angular-ui-router.js"></script>
    <script src="../src/frame/bootstrap-3.0.0/js/bootstrap.min.js"></script>
    <script src="../src/frame/jquery.masonry.min.js"></script>
    <script src="../src/frame/touch-0.2.14.min.js"></script>

    <script src="../src/dist/js/minion.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    var container = $('.row');
    container.imagesLoaded(function() {
        container.masonry({
            itemSelector: '.grid-item',
            isAnimatedBooleanfalse: true,
            isFitWidthBooleanfalse: true,
            isResizableBooleantrue: true
        });
    });

    touch.on(container, 'swipeup', function(ev) {  

        // scroll
        // console.log('------------');
        var view_height = $(window).height();
        var height = container.height();
        var scroll_height = $(document).scrollTop();
        var to_bottom = view_height - scroll_height;

        // console.log('view_height:' + view_height);
        // console.log('height:' + height);
        // console.log('scroll_height:' + scroll_height);
        // console.log('to_bottom:' + (height - (scroll_height + view_height)));
        if(to_bottom < 150) {
            // console.log('************');
            // append
            var ele = '<div class="col-xs-6 col-md-2 grid-item">'
                        + '<img src="../src/img/face/test.png" />'
                    + '</div>';
            var ele_append = $(ele + ele + ele + ele + ele + ele + ele);
            container.append(ele_append).masonry('appended', ele_append, true); 
        }
        

    });
});
</script>

</body>

</html>
